<!--多张图片上传-->
<template>
  <div class="flex-main">
    <div class="upload__file_desc" style="margin-bottom: 12px">
      <slot name="top-desc" />
    </div>
    <FileImageItem
      :files="fileList"
      :width="(width * cropRatio)"
      :height="width"
      :remove="true"
      @remove="removeFile">
      <template>
        <SingleImageUpload
          v-if="fileList.length!==limit"
          v-model="fileUUID"
          :catalog="catalog"
          :size-limit="sizeLimit"
          :crop="crop"
          :width="width"
          style="border: 0;margin-bottom: 10px;margin-right: 10px;"
          desc=""
          :desc-show="false"
          :crop-ratio="cropRatio" />
      </template>
    </FileImageItem>
    <div class="upload__file_desc">
      <div><i class="el-icon-warning-outline" /> 单张照片不能超过{{ sizeLimit }}M，最多只允许上传{{ limit }}张照片！</div>
      <div v-if="desc"><i class="el-icon-warning-outline" /> {{ desc }}</div>
    </div>
  </div>

</template>

<script>

export default {
  components: { },
  props: {
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    },
    catalog: {
      type: String,
      required: true
    },
    width: {
      type: Number,
      required: false,
      default: 128
    },
    limit: {
      type: Number,
      required: false,
      default: 10
    },
    sizeLimit: {
      type: Number,
      required: false,
      default: 2
    },
    crop: {
      type: Boolean,
      default: true
    },
    cropRatio: {
      type: Number,
      required: false,
      default: 1 / 1
    },
    desc: {
      type: String,
      required: false,
      default: ``
    }
  },
  data() {
    return {
      fileUUID: '',
      fileUrls: [],
      fileList: []

    }
  },
  computed: {},
  watch: {
    value: function(val) {
      this.analysisFile(val)
    },
    fileUUID: function(val) {
      if (val) {
        var temp = this.fileList
        temp.push(val)
        this.analysisFile(temp.join(','))
        this.$emit('input', temp.join(','))
        setTimeout(() => {
          this.fileUUID = ''
        }, 100)
      }
    }
  },
  created() {
    this.analysisFile(this.value)
  },
  methods: {
    analysisFile(val) {
      this.fileUrls = []
      this.fileList = []
      if (val) {
        val.split(',').forEach(item => {
          this.fileList.push(item)
          this.fileUrls.push(this.common.getFileView(item))
        })
      }
    },
    async removeFile(uuid) {
      try {
        this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('fileResourcesRemove', uuid).then(response => {
            this.fileUUID = null
            this.$modal.msgSuccess('删除成功')
            var temp = this.fileList.filter(item => {
              return item !== uuid
            })
            this.analysisFile(temp.join(','))
            this.$emit('input', temp.join(','))
          }).catch(() => { this.fileUUID = null })
        }).catch((_) => {

        })
      } catch (_) {
        console.log()
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.upload__file_desc{
  color: #A6A6A6;
  font-size: 12px;
  margin-top: 0px;
  i{
    margin-right: 5px;
  }
}
</style>
